<template>
  <div class="chatBan-container">
    <NewCard title="" style="position: relative; height: 100%">
      <div slot="title" class="Group_title">
        <div class="Group_header">
          <!-- 头像 -->
          <!-- <el-avatar
            class="avatar"
            shape="square"
            :style="{ 'background-color': currentChat.color }"
            :size="40"
          >
            {{
              getHanzi(
                currentChat.name.substring(
                  currentChat.name.lastIndexOf("-") + 1
                )
              )
            }}
          </el-avatar> -->
          <span
            >{{ this.currentChat.name | ellipsis }}（{{
              currentChat.members | getMemberNum
            }}）</span
          >
        </div>

        <span
          class="status"
          :class="currentChat.cancelTime ? '' : 'isActive'"
          @click="viewDetail(currentChat.id, currentChat.type)"
        >
          <i
            class="el-icon-arrow-right"
            style="font-size: 16px; font-weight: 700"
          ></i>
        </span>
      </div>

      <!-- 聊天框 -->
      <div class="chat-container" @click="showMouse = false" id="scrollMsg">
        <div class="PrDetail">
          <div class="problemDetail" v-if="!isNetwork">
            <p>
              【{{ currentChat.type == "5" ? "咨询" : "项目" }}】
              {{ currentChat.type == "5" ? currentChat.title : threeName }}
            </p>
          </div>
          <!-- 加载重连中 -->
          <!-- <div class="Group_error" v-else-if="isLoading">
            <el-alert title="网络重连中" type="error" center :closable="false">
            </el-alert>
          </div> -->
          <!-- 警告框 -->
          <div class="Group_error" v-else>
            <el-alert
              title="当前网络不可用"
              type="error"
              center
              :closable="false"
            >
            </el-alert>
            <!-- <button>网络设置</button> -->
          </div>
        </div>

        <div class="chat-container-scroll" ref="myScroll">
          <!-- 对话框 -->
          <div
            v-for="(message, index) in chatMessages || []"
            :key="index"
            :class="
              message.createBy == userId
                ? 'self chat-scroll__item'
                : 'chat-scroll__item'
            "
            v-show="delText"
          >
            <!-- 对方头像 -->
            <div class="chat-scroll__item__avatar_friend">
              <img :src="getAvatar(message) || DeAvatar"/>
            </div>

            <!-- 当前发送的消息 -->
            <div class="sender" @click.stop>
              <!--  发送人姓名-->
              <div class="chat-scroll__item_name">
                <!-- 发送时间 -->
                <span class="timeRead">
                  <!-- {{ (message.createTime | formatDate).replace(/-/g, "/") }} -->
                  {{ getMsgTime(message) }}
                </span>
                <!-- <span class="timeRead">{{
                  message.createTime | formatDate
                }}</span> -->
                <!-- <span
                  class="zjPic"
                  v-if="
                    isExpert(message.createBy)
                  "
                  ><img src="@/assets/images/zj_icon.png" alt=""
                /></span> -->
                <!-- 发送姓名 -->
                <span style="display: inline-block">{{message.createBy == userId ? userInfo.nickName : getName(message)}}</span>
                <!-- <span style="display: inline-block">{{
                  message.createBy == userId
                    ? userInfo.nickName
                    : getFriend(message.createBy) &&
                      getFriend(message.createBy).nickName
                }}</span> -->
              </div>
              <div class="sender-message">
                <div v-if="message.createBy == userId">
                  <!-- 全部已读 -->
                  <i
                    class="el-icon-circle-check"
                    style="margin-bottom: 10px; margin-right: 10px"
                    v-if="sumReads(message) == 100"
                    @click="ReadUn(message, index, $event)"
                  >
                  </i>
                  <!-- 百分比记录已读未读 -->
                  <i
                    style="margin-right: 10px"
                    v-else
                    @click="ReadUn(message, index, $event)"
                  >
                  <!-- v-if="!isNaN(parseInt(sumReads(message.reads)))" -->
                    <el-progress
                      type="circle"
                      :width="12"
                      :percentage="sumReads(message)"
                      :stroke-width="5"
                      color="#06B49C"
                      slot="reference"
                    >
                    </el-progress>
                  </i>
                </div>
                <!-- 发送的内容 -->
                <div
                  class="chat-scroll__item__message"
                  id="sender-message"
                  @contextmenu.prevent="rightClickFn($event)"
                >
                  <div class="item-box" v-if="message.status == -1">
                    <span
                      style="line-height: 180%"
                    >
                    消息已撤回
                    </span>
                  </div>
                  <!-- 语音 -->
                  <div class="item-box" v-else-if="message.type == 8">
                    <div class="record_voice" @click="playVoice(message)">
                      <div class="voice_file" :style="{'width': getVoiceWidth(message)}">
                        {{message.voiceDuration}}
                        <img src="@/assets/images/audio_gif.gif" v-if="innerAudioIcon == message.id" />
                        <img src="@/assets/images/audio.png" v-else />
                      </div>
                      <div class="voice_inter" v-show="message.voiceShow">
                        <span v-for="(it,i) in message.voiceScript" :key="i">{{ it }}</span>
                      </div>

                    </div>
                  </div>
                  <!-- 语音 end -->
                  <!-- 文件 -->
                  <a
                    :download="getFileName(message.msg)"
                    :href="message.msg"
                    class="uploadF"
                    id="msgFile"
                    v-else-if="getSuffixFile(message)"
                  >
                    <img
                      src="@/assets/images/wj_icons.svg"
                      style="vertical-align: middle"
                      alt=""
                      v-if="
                        message.msg.endsWith('.pdf') ||
                        message.msg.endsWith('.docx') ||
                        message.msg.endsWith('.ppt') ||
                        message.msg.endsWith('.doc') ||
                        message.msg.endsWith('.pptx') ||
                        message.msg.endsWith('.PDF') ||
                        message.msg.endsWith('.xlsx') ||
                        message.msg.endsWith('.xls') ||
                        message.msg.endsWith('.txt') ||
                        message.msg.endsWith('.key') ||
                        message.msg.endsWith('.numbers') ||
                        message.msg.endsWith('.word')
                      "
                    />
                    <!-- 文件夹 -->
                    <img
                      src="@/assets/images/wjj_icon.svg"
                      alt=""
                      v-else
                      style="vertical-align: middle"
                    />
                    <span style="margin-left: 10px; margin-bottom: 5px">{{
                      getFileName(message.msg)
                    }}</span>
                  </a>
                  <!--  图片 -->
                  <div
                    class="demo-image__preview"
                    id="msgImage"
                    v-else-if="getSuffix(message)"
                  >
                    <el-image
                      style="width: 100px; cursor: pointer"
                      :src="message.msg + '?x-oss-process=image/resize,m_fill,w_30,h_200,quality,q_60'"
                      :preview-src-list="getuploadImgs(message)"
                      :fit="fit"
                      lazy
                      @click="clickImage"
                    >
                    </el-image>
                  </div>

                  <!-- 文字 -->

                  <span
                    style="line-height: 180%"
                    ref="textContent"
                    id="link"
                    v-else
                    v-html="highlight(message)"
                  >
                  </span>
                </div>
                <!-- 鼠标右击事件 -->
                <!-- <div
                  class="mouse"
                  v-if="showMouse"
                  :style="{ left: left + 'px', top: top + 'px' }"
                >
                  <ul>
                     <li
                      @click="TurnText"
                      v-if="matchType(message.msg) == '语音'"
                    >
                      转文字
                    </li> -->
                <!-- <li @click="copy">复制</li> -->
                <!-- <li @click="answer" v-if="message.createBy != userId">
                      回复
                    </li> -->
                <!-- <li
                      @click="download"
                      v-if="matchType(message.msg) == '图片'"
                    >
                      下载
                    </li> -->
                <!-- <li
                      @click="chenHUI(message.id)"
                      v-if="message.createBy == userId"
                    >
                      撤回
                    </li> -->
                <!-- <li @click="delMsg">删除</li> -->
                <!-- </ul>
                </div>  -->
                <!-- 已读未读详情框 -->
                <div
                  class="reader"
                  v-if="showHaveRead && showHaveReadIndex == index"
                  :style="{ left: left + 'px', top: top + 'px' }"
                >
                  <div class="read">
                    <p>
                      <span>{{ readPerson.length }}</span> 已读
                    </p>
                    <ul>
                      <li
                        v-for="(memberItem, memberIndex) in readPerson"
                        :key="memberIndex"
                      >
                        <el-avatar :size="28"
                          ><img
                            :src="
                              memberItem.avatar == ''
                                ? DeAvatar
                                : memberItem.avatar
                            "
                            alt="" /></el-avatar
                        ><span>{{ memberItem.nickName }}</span>
                      </li>
                    </ul>
                  </div>
                  <div class="unread">
                    <p>
                      <span>{{ unReadPerson.length }}</span> 未读
                    </p>
                    <ul>
                      <li
                        v-for="(memberItem, memberIndex) in unReadPerson"
                        :key="memberIndex"
                      >
                        <el-avatar :size="28"
                          ><img
                            :src="
                              memberItem.avatar == ''
                                ? DeAvatar
                                : memberItem.avatar
                            "
                            alt="" /></el-avatar
                        ><span>{{ memberItem.nickName }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 聊天输入框 -->
      <div class="chat-text" :class="ShuRu ? '' : 'bgc'">
        <el-input
          type="textarea"
          :placeholder="('发送给 ' + currentChat.name) | ellipsis"
          autosize
          autofocus
          v-model="content"
          @keydown.enter.native="keyDown"
          @keyup.native="keyUp"
          v-if="ShuRu"
        >
        </el-input>
        <el-input
          type="textarea"
          placeholder="订单已结案，会话已结束。"
          autosize
          autofocus
          :disabled="true"
          v-else
        >
        </el-input>
        <!-- <div class="lawContent" v-if="lawContent">
          <ul>
            <li v-for="(lawItem, lawIndex) in selectLawList" :key="lawIndex">
              <h3>《{{ lawItem.lawTitle }}》</h3>
              <span>{{ lawItem.content }}</span>
            </li>
          </ul>
        </div> -->
        <div class="chat-tool" @click.stop>
          <!-- 表情 -->
          <span
            style="cursor: pointer"
            @click.stop="showEmojiCom = !showEmojiCom"
            ><img src="@/assets/images/bq_icon.png" alt=""
          /></span>
          <custom-emoji
            v-if="showEmojiCom"
            class="emoji-component"
            @addemoji="addEmoji"
          />
          <!-- @ -->
          <span style="cursor: pointer" @click="showAt">
            <img src="@/assets/images/@_icon.png" alt="" />
          </span>
          <!-- 更多 -->
          <span
            style="cursor: pointer"
            @click.stop="showFileTool = !showFileTool"
            ><img src="@/assets/images/gd_icon.png" alt="" />
          </span>
          <div class="FileTool" v-if="showFileTool">
            <ul>
              <!-- 图片 -->
              <li>
                <el-upload
                  class="upload-demo"
                  :auto-upload="false"
                  action="#"
                  :multiple="true"
                  accept=".jpg, .png ,.gif"
                  :on-change="(val) => uploadFile(val)"
                  :show-file-list="false"
                >
                  <img src="@/assets/images/tp_icon.svg" />
                  <span>发送图片</span>
                </el-upload>
              </li>
              <!-- 文件 -->
              <li id="file" @click="getFile">
                <img src="@/assets/images/wj_Icon.svg" />
                <input
                  type="file"
                  ref="file"
                  style="display: none"
                  @change="handleFileUpload($event)"
                />
                <span>上传文件</span>
              </li>
              <!-- 文件夹 -->
              <!-- <li id="file" @click="getFile">
                <img src="@/assets/images/wj_Icon.svg" />
                <input
                  type="file"
                  ref="file"
                  style="display: none"
                  @change="handleFileUpload($event)"
                />
                <span>上传文件夹</span>
              </li> -->
              <!-- 引用法条 -->
              <!-- <li @click="queryLaw = true">
                <img src="@/assets/images/ft_icon.svg" /><span>引用法条</span>
              </li> -->
            </ul>
          </div>
          <!-- 发送 -->
          <el-button round class="chat-btn" @click="sendMsg" :disabled="!ShuRu"
            >发送</el-button
          >
        </div>
      </div>
      <!-- 图片弹框 -->
      <el-dialog
        :visible.sync="fileImage"
        width="20%"
        :before-close="handleClose"
      >
        <template slot="title" class="fileImageTitle">
          发送给 {{ currentChat.name }}
        </template>
        <!-- 如果是一张图 -->
        <div class="upload" v-if="uploadImgs.length == 1">
          <img
            class="svg-icon"
            :src="uploadImgs[0].src"
            id="img"
            v-if="
              uploadImgs[0].raw && uploadImgs[0].raw.type.startsWith('image')
            "
          />
          <audio
            class="svg-icon"
            :src="uploadImgs[0].src"
            v-else-if="
              uploadImgs[0] &&
              uploadImgs[0].raw &&
              uploadImgs[0].raw.type &&
              uploadImgs[0].raw.type.startsWith('audio')
            "
          ></audio>
          <video
            class="svg-icon"
            :src="uploadImgs.src"
            v-else-if="
              uploadImgs[0].raw &&
              uploadImgs[0].raw.type &&
              uploadImgs[0].raw.type.startsWith('video')
            "
          ></video>
        </div>
        <!-- 如果是多张图 -->
        <ul class="uploadS" v-else>
          <li v-for="(imgsItem, imgsIndex) in uploadImgs" :key="imgsIndex">
            <img :src="imgsItem.src" alt="" id="img" />
            <span>{{ imgsItem.name }}</span>
          </li>
        </ul>
        <div class="uploadBtn">
          <el-button @click="fileImage = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="!ShuRu"
            >发送</el-button
          >
        </div>
      </el-dialog>

      <!-- 文件弹框 -->
      <el-dialog
        :visible.sync="fileShow"
        width="20%"
        :before-close="handleClose"
      >
        <template slot="title" class="fileImageTitle">
          发送给 {{ currentChat.name }}
        </template>
        <ul class="uploadF">
          <li v-for="(filesItem, fliesIndex) in uploadImgs" :key="fliesIndex">
            <img
              src="@/assets/images/wj_icons.svg"
              alt=""
              v-if="
                filesItem.name.endsWith('.pdf') ||
                filesItem.name.endsWith('.docx') ||
                filesItem.name.endsWith('.ppt') ||
                filesItem.name.endsWith('.doc') ||
                filesItem.name.endsWith('.pptx') ||
                filesItem.name.endsWith('.PDF') ||
                filesItem.name.endsWith('.xlsx') ||
                filesItem.name.endsWith('.xls') ||
                filesItem.name.endsWith('.txt')
              "
            />
            <img v-else src="@/assets/images/wjj_icon.svg" alt="" />
            <span>{{ filesItem.name }}</span>
          </li>
        </ul>
        <div class="uploadBtn">
          <el-button @click="fileShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="!ShuRu"
            >发送</el-button
          >
        </div>
      </el-dialog>
      <!-- @群成员列表框 -->
      <div class="GroupList" v-if="GroupListShow">
        <h3>群聊成员</h3>
        <div class="GroupMember">
          <ul>
            <li
              v-for="(memberItem, memberIndex) in friendArr"
              :key="memberIndex"
              @click="AtSomeone(memberItem.userId, memberItem.nickName)"
            >
              <!-- 头像 -->
              <el-avatar
                :src="memberItem.avatar == '' ? DeAvatar : memberItem.avatar"
                :size="24"
              ></el-avatar>
              <!-- 名字  -->
              <span>{{ memberItem.nickName }}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 查法条 -->
      <Comdrawer
        size="85%"
        title="引用法条"
        @eventColse="queryLawClose"
        :drawer="queryLaw"
      >
        <div class="drawerMain">
          <GetLaw @handlerLaw="handlerLaw" ref="child"></GetLaw>
        </div>
      </Comdrawer>

      <!-- 咨询详情 ********************************************************************************* -->
      <Comdrawer
        size="60%"
        title="订单详情"
        :drawer="detailState"
        @eventColse="eventColse"
      >
        <OrderDetails
          class="orderDetails"
          :orderInfo="nowOrderInfo"
        ></OrderDetails>
      </Comdrawer>
      <!-- 咨询详情 *********************************************************************************end -->

      <!-- ******************************************项目弹窗******************************************* -->
      <!-- 专家、商务、渠道、助理、跟单看的项目弹窗 -->
      <Comdrawer
        size="60%"
        title="订单详情"
        :drawer="projectShow"
        @eventColse="projectColse"
        v-if="nowOrderInfo.userId != $store.state.user.userId"
      >
        <!-- 项目更改记录按钮 -->
        <template slot="title">
          <div class="drawerIcon">
            <i class="el-icon-document recordBtn" @click="clickRecord"></i>
            <i class="el-icon-close" @click="projectShow=false"></i>
          </div>
        </template>
        <Project :orderInfo="nowOrderInfo"></Project>
      </Comdrawer>
      <!-- 专家、商务、渠道、助理、跟单看的项目弹窗 end-->
      <!-- 用户看的项目弹窗 -->
      <Comdrawer
        size="60%"
        title="订单详情"
        :drawer="projectShow"
        @eventColse="projectColse"
        v-else
      >
        <div class="userProject-box">
          <UserProject
            :buyDetail="nowOrderInfo"
            v-if="userProjectShow"
          ></UserProject>
          <UserPay
            :project="project"
            :orderinfo="orderinfo"
            :step="step"
            :flow="flow"
            v-else
          >
          </UserPay>
        </div>
      </Comdrawer>
      <!-- 用户看的项目弹窗 end-->

      <!-- 项目更改记录 -->
      <Comdrawer
        size="30%"
        title="更改记录"
        :drawer="recordShow"
        @eventColse="recordColse"
      >
        <Record :orderInfo="nowOrderInfo" :project="projectData"></Record>
      </Comdrawer>

      <!-- 修改项目改价 -->
      <Comdrawer
        size="30%"
        title="更改记录"
        :drawer="editRewardShow"
        @eventColse="editRewardColse"
      >
        <EditReward
          :orderInfo="nowOrderInfo"
          :project="projectData"
        ></EditReward>
      </Comdrawer>

      <!-- 修改收比 -->
      <Comdrawer
        size="30%"
        title="修改收比"
        :drawer="editRatioShow"
        @eventColse="editRatioColse"
      >
        <EditRatio :orderInfo="nowOrderInfo"></EditRatio>
      </Comdrawer>

      <!-- ***************************************项目弹窗 end******************************************* -->

      <!-- 语音播放 -->
      <audio
        style="opacity: 0; position: fixed;bottom:0;right:0;"
        :src="innerAudioMsg"
        autoplay="autoplay"
        controls="controls"
        ref="voiceAudio"
        @ended="audioEnded"
      >Your browser does not support the audio element.</audio>
      <!-- 语音播放 end -->
    </NewCard>
  </div>
</template>

<script>
//是否有网
var timerIn;
var timerCl;
var isconnected = false;

// var isNetwork = false;
import {
  getCarouselListApi,
  getDocRecommendApi,
  getLawGetInfoApi,
  getQaGetInfoApi,
  getTopGetInfoApi,
  getScontractGetInfoApi,
} from "@/BMViews/api/work/carousel.js";
import {
  uploadEmployees,
  getList,
  getDetaile,
  getName,
  getOrderMessageListApi,
} from "@/BMViews/api/upload/index.js";
// import { position } from "caret-pos";
import NewCard from "@/wss/components/newCard.vue";
import customEmoji from "@/BMViews/views/userCenter/messageCenter/customEmoji";
import Comdrawer from "@/wss/components/Comdrawer.vue";
import GetLaw from "@/wss/newViews/delivery/consult/getLaw.vue";
import OrderDetails from "@/wss/newViews/delivery/documentary/orderDetails.vue";
// 项目组件
import Project from "@/wss/newViews/business/circleTheMain/project/project.vue";
import UserProject from "@/BMViews/views/userCenter/homepage/project.vue";
import UserPay from "@/BMViews/views/userCenter/homepage/Pay.vue";
import Record from "@/wss/newViews/business/circleTheMain/project/record.vue";
import EditReward from "@/wss/newViews/business/circleTheMain/project/editReward.vue";
import EditRatio from "@/wss/newViews/business/circleTheMain/project/editRatio.vue";
import { getOrderGetInfoApi } from "@/BMViews/api/financial/order.js";
import { mapGetters } from "vuex";
import { formatDate } from "@/utils/index.js";

export default {
  components: {
    NewCard,
    Comdrawer,
    GetLaw,
    Comdrawer,
    customEmoji,
    OrderDetails,
    Project,
    UserPay,
    UserProject,
    Record,
    EditReward,
    EditRatio,
  },
  data() {
    return {
      isNetwork: false, //是否有网
      isLoading: false, //是否重连加载中
      projectShow: false, //项目弹窗
      userProjectShow: true, //当前是用户的时候 用户项目弹窗显示还是支付显示
      recordShow: false, // 项目更改记录
      projectData: {}, //项目的信息
      editRewardShow: false, // 修改报酬0
      editRatioShow: false, //修改收比

      // 当前是用户的时候 支付的数据
      project: "",
      orderinfo: "",
      step: "",
      flow: "",
      // 当前是用户的时候 支付的数据 end

      fit: "fill",
      // 三级类型名称
      threeName: "",
      // 消息类型
      msgType: "1",
      quoteId: [],
      quoteName: "", //@的人名T
      // 默认头像src\assets\images\defaultAvatar.jpg
      DeAvatar: require("@/assets/images/defaultAvatar.jpg"),
      // 高亮显示已读未读使用的index
      showHaveReadIndex: "",
      // 当前上传图片或文件的url
      myUrl: "",
      //放大图片
      photoVisible: false,
      bigImgUrl: "",

      // 右击激活的菜单
      rightActiveId: "",
      ws: "",
      //查法条右侧抽屉是否显示
      queryLaw: false,
      content: "", //输入框的内容
      // 消息状态(默认为发送消息)
      status: "1",
      // 更多工具
      showFileTool: false,
      // 聊天对话框
      chatFarm: false,
      // 聊天的历史消息
      chatMessages: [],

      concatList: [],
      // 当前聊天的群
      currentChat: {},
      // currentChat: {
      //   name: "",
      //   color: "",
      //   orderNo: "",
      //   cancelTime: "",
      //   members: "",
      //   messages: [],
      // },
      // 输入框
      ShuRu: true,
      // 群人数
      total: "",
      // 当前用户
      currentUser: {},
      // 朋友
      friend: [],
      nameArr: [],
      amountNum: [], //除去了status=-1的人（删除的人）
      filFriendId: [], //除去了status=-1的人 ，其余人的userid
      friendArr: [],
      tempSnowflake: "",
      // 已选的法条列表
      selectLawList: [],
      // 法条框样式
      lawContent: false,
      // 已读未读详情
      showHaveRead: false,
      // 已读数组
      readPerson: [],
      // 未读数组
      unReadPerson: [],
      // 右击点击事件
      showMouse: false,
      top: 0,
      left: 0,
      // 复制的文本
      currentClickText: "",
      //信息文本框
      delText: true,
      // 表情框
      showEmojiCom: false,
      detailState: false, //查看详情状态
      nowOrderInfo: {}, // 当前点击的订单信息
      // 发送文件图片的弹框
      fileImage: false,
      // 发送文件的弹框
      fileShow: false,
      // 图片存储
      uploadImgs: [],
      // 消息数量
      num: 0,
      // 群成员列表框
      GroupListShow: false,
      pageNum: 1,
      pageSize: 10,
      // 推荐名称
      oneName: "",
      twoName: "",
      threeName: "",

      // onclose: this.ws.onclose(),
      //用户信息
      userList: [],
      uploads: false, //下拉加载状态
      scrollHeight:0,

      innerAudioContext: {}, //当前播放的语音
      innerAudioMsg: '', //当前播放的语音文件
      innerAudioIcon: '', //''是不会动的语音图标 不为空的时候是id是会动的语音图标
    };
  },
  props:{
    //当前聊天室信息
    imRoomInfo:{
      type: Object,
      default: ()=>{ return },
    },
  },
  watch: {
    //监听聊天室信息变化
    imRoomInfo:{
      deep: !0,
      immediate: true,
      async handler(newValue, oldValue) {
        console.log('聊天组件监听圈聊信息更新',newValue)
        //获取聊天记录
        if(!newValue) return;
        this.currentChat = JSON.parse(JSON.stringify(newValue));
        this.threeName = newValue.name.substring(newValue.name.lastIndexOf("-") + 1);

        this.chatMessages = []; //初始化聊天
        this.pageNum = 1;
        this.uploads = false;

        let msgLog = JSON.parse(localStorage.getItem('chatMsgLog')) || [];
        let findMsgLog = msgLog.find(item => item.id == this.imRoomInfo.id)
        if(findMsgLog){
          this.chatMessages = findMsgLog.msgData;
        }

        await this.getMemberMessage();
        // 判断时间超过三天没，超过就不能显示输入框聊天了
        // let members = newValue.member.filter((item) => {
        //   return item.status != -1;
        // });
        //获取群成员用户信息
        // let userIds = newValue.members?.map(item => (item.userid));

        // let userList = await getName({userIds: userIds?.join(',')})
        // if(userList.code == 200){
        //   this.userList = userList.data
        //   this.friendArr = userList.data;
        // }
        this.userList = newValue.avatarArr;
        this.friendArr = newValue.avatarArr;

        //显示隐藏信息框
        this.ShuRu = true;
        // let SuccessTime = cancelTime?.substring(0, 10);
        let SuccessTime = newValue.cancelTime;
        let newDate = this.getDate(new Date());
        if (newDate > SuccessTime) {
          // let days = this.DateMinus(SuccessTime, newDate);
          // if (days >= 3) {
          this.ShuRu = false;
        } else {
          this.ShuRu = true;
        }

        // 修改已读状态
        // 判断reads的id在不在成员列表里，如果在则不修改
        this.chatMessages.forEach((item) => {
          if(item.createBy == this.userId) return;
          let filtSelf = item.reads?.filter((itemRd) => {
            // console.log(itemRd.userid);
            return itemRd == this.userId;
          });
          // 如果reads不存在或者reads里没有自己，则去调接口改变状态;
          //如果是自己发送的消息不用去修改,如果reads里面有自己也不用去修改
          if (!item.reads || (item.reads && filtSelf.length == 0)) {

            this.readMessage(item.id, item.createBy, newValue.id);
          }
          return;
        });
      }
    }
  },
  computed: {
    ...mapGetters(["token", "avatar", "userId", "userType", "userInfo"]),

    getUsrType() {
      // 10自己注册 00系统注册 40跟单 50专家 60商务 65渠道 69商务和渠道 80实体 90专家助理
      return (type) => {
        if (type == "0") {
          return "用户";
        } else if (type == "1") {
          return "专家";
        } else if (type == "2") {
          return "商务专员";
        } else if (type == "3") {
          return "商务总监";
        } else if (type == "4") {
          return "商务经理";
        } else if (type == "5") {
          return "渠道专员";
        } else if (type == "6") {
          return "渠道总监";
        } else if (type == "7") {
          return "渠道经理";
        } else if (type == "8") {
          return "跟单";
        } else if (type == "9") {
          return "专家助理";
        } else if (type == "10") {
          return "圈子成员";
        } else {
          return "商务";
        }
      };
    },

    // 获取文件后缀
    getSuffixFile() {
      return (message) => {
        if (
          message?.suffix?.endsWith(".pdf") ||
          message?.suffix?.endsWith(".PDF") ||
          message?.suffix?.endsWith(".ppt") ||
          message?.suffix?.endsWith(".docx") ||
          message?.suffix?.endsWith(".zip") ||
          message?.suffix?.endsWith(".tgz") ||
          message?.suffix?.endsWith(".rar") ||
          message?.suffix?.endsWith(".doc") ||
          message?.suffix?.endsWith(".pptx") ||
          message?.suffix?.endsWith(".xlsx") ||
          message?.suffix?.endsWith(".xls") ||
          message?.suffix?.endsWith(".txt") ||
          message?.suffix?.endsWith(".exe") ||
          message?.suffix?.endsWith(".word") ||
          message?.suffix?.endsWith(".key") ||
          message?.suffix?.endsWith(".numbers") ||
          message?.msg?.endsWith(".pdf") ||
          message?.msg?.endsWith(".PDF") ||
          message?.msg?.endsWith(".ppt") ||
          message?.msg?.endsWith(".docx") ||
          message?.msg?.endsWith(".doc") ||
          message?.msg?.endsWith(".zip") ||
          message?.msg?.endsWith(".rar") ||
          message?.msg?.endsWith(".tgz") ||
          message?.msg?.endsWith(".pptx") ||
          message?.msg?.endsWith(".xlsx") ||
          message?.msg?.endsWith(".xls") ||
          message?.msg?.endsWith(".txt") ||
          message?.msg?.endsWith(".exe") ||
          message?.msg?.endsWith(".word") ||
          message?.msg?.endsWith(".key") ||
          message?.msg?.endsWith(".numbers")
        ) {
          return true;
        } else {
          return false;
        }
      };
    },
    // 判断是什么身份
    isExpert() {
      return (createBy) => {
        // console.log(this.userList, "朋友朋友朋友朋友朋友朋友");
        let userInfo = this.userList.find(item=>item.userId == createBy)
        return userInfo?.roles?.some(item => {
					if (item.roleKey == "zxzj") {
						return true
					}
				})
        // return this.friend.find((item) => {
        //   return item.userid == createBy;
        // });
      };
    },
    // // 判断是谁发的消息
    getFriend() {
      return (createBy) => {
        // console.log(createBy);
        // console.log('头像集',this.friendArr);
        return this.friendArr.find((FriendItem) => {
          return FriendItem.userId == createBy;
        });
      };
    },
    //获取用户头像
    //获取头像
    getAvatar(){
      return (data) => {
        if(!data) return;
        let info = this.currentChat.avatarArr.find(item=>item.userId == data.createBy)
        return info?.avatar;
      };
    },
    //获取名称
    getName(){
      return (data) => {
        if(!data) return;
        console.log('用户信息',data,this.currentChat.avatarArr);
        let info = this.currentChat.avatarArr.find(item=>item.userId == data.createBy)
        return info?.nickName;
      };
    },
    // 滚动
    myScroll() {
      return this.$refs.myScroll;
    },
    // 计算多少人已读
    sumReads() {
      //已读的人/总的人-1 *100
      return (item) => {
        if (!item.reads) {
          return 0;
        	// return false;
        }
        let bbb = this.currentChat.members.filter(res => {
        	return res.status != -1 && res.userid != this.userId
        })
        let readss = Array.from(new Set(item.reads))
        let reads = readss.filter(res => (res != this.userId))
        let aaa = reads.length / bbb.length * 100;
        console.log(aaa);
        return aaa;
        // 如果不是数组直接退出
        // if (!Array.isArray(reads) || reads == []) return;
        // let readNum = reads.filter((item) => {
        //   if (item.userid != this.userId && item.status == "0") {
        //     return item;
        //   }
        // });

        // if (readNum.length / (this.amountNum.length - 1) > 1) {
        //   return 100;
        // }
        // return (readNum.length / (this.amountNum.length - 1)) * 100;
      };
    },
  },
  created() {
    // console.log(this.$WebSocket.wsss());
    if (
      !this.$WebSocket.wsss() ||
      (this.$WebSocket.wsss().readyState != 0 &&
        this.$WebSocket.wsss().readyState != 1)
    ) {
      this.$WebSocket.initialize();
    }
    // 接收成员
    this.$bus.$on("friendArr", (friendArr) => {
      this.friendArr = friendArr;
      // console.log(this.friendArr, "9999999999999999999999999");
    });
    this.$bus.$on("concatList", (concatList) => {
      this.concatList = concatList;
    });
    // 先挂载再掉接口
    // console.log(this.currentChat.members);
    // let timeTerval = setInterval(async () => {
    //   if (this.currentChat.id) {
    //     clearInterval(timeTerval);
    //     // this.getMessage();
    //     // this.getMember();
    //   }
    // }, 1);
  },
  beforeMount() {
    this.friend = this.$route.query;
    this.currentUser = this.currentUser;
  },
  mounted() {
    // 更新页面渲染
    this.$bus.$on("uploadMessage", (data) => {
      // 隐藏项目
      this.messageHadler(data);
    });
    document.addEventListener('paste', this.onPasteUpload)
    // 全局监听网络变化;
    this.$bus.$on("isNetwork", (isNetwork) => {
      this.isNetwork = isNetwork;
    });

    // 获取链接
    this.$bus.$on("Link", (link, oneName, twoName, threeName) => {
      // console.log(link, oneName, twoName, threeName, "ljie");
      this.oneName = oneName;
      this.twoName = twoName;
      this.threeName = threeName;
      let msg = "";
      if (threeName) {
        msg = oneName + "—" + twoName + "—" + threeName;
      } else if (twoName) {
        msg = oneName + "—" + twoName;
      } else {
        msg = oneName;
      }
      let time = new Date().toLocaleString();
      let data = {
        type: "1",
        msgType: "7",
        no: this.currentChat.id,
        msg: msg,
        msgid: this.tempSnowflake.nextId() + "",
        createBy: this.userId,
        msgUserid: this.userId,
        createTime: time,
        quoteid: link,
      };
      // console.log(data, "链接链接链接链接");

      this.$WebSocket.onSend(JSON.stringify(data));
    });

    //  实时获取设置人员的变化
    this.$bus.$on("groupMeberLength", (members) => {
      this.currentChat.members = members;
    });

    // 通过$bus关闭修改项目改价弹窗
    this.$bus.$on("editRewardBus", (projectData) => {
      // 项目的信息
      this.projectData = projectData;
      // 显示项目改价
      this.editRewardShow = true;
      // 隐藏项目
      this.projectShow = false;
    });

    // 通过$bus关闭修改收比弹窗
    this.$bus.$on("editRatioBus", () => {
      // 显示修改收比
      this.editRatioShow = true;
      // 隐藏项目
      this.projectShow = false;
    });

    // 通过$bus 隐藏项目的弹窗
    this.$bus.$on("closeProjectBus", () => {
      // 隐藏项目
      this.projectShow = false;
    });

    //用户看的项目页面 通过$bus跳转支付页面  this.project, this.orderinfo, this.step, flowId
    this.$bus.$on("handlerPay", (num, project, orderinfo, step, flow) => {
      this.userProjectShow = false;
      this.project = project; //项目信息
      this.orderinfo = orderinfo; //订单信息
      this.step = step; //步骤数据
      this.flow = flow; //步骤id
    });

    // 项目支付成功后返回聊天页面
    this.$bus.$on("handlerPaySuccee", () => {
      this.userProjectShow = true;
      this.projectShow = false;
    });
    // 项目支付成功后返回聊天页面 end

    // 扫码支付成功后聊天页面的支付成功后跳转
    this.$bus.$on("messagePaySkip", () => {
      this.userProjectShow = true;
      this.projectShow = false;
    });
    // 扫码支付成功后聊天页面的支付成功后跳转end

    //每次页面渲染完之后滚动条在最底部
    // this.chatScroll();
    // 全局点击事件
    document.addEventListener("click", this.bodyCloseMenus);
    // 滚动监听事件
    this.$nextTick(() => {
      this.$refs.myScroll.addEventListener("scroll", this.scrollToTop, true);
    });
    // // websocket
    // 雪花算法
    var Snowflake = (function () {
      function Snowflake(_workerId, _dataCenterId, _sequence) {
        this.twepoch = 1288834974657n;
        //this.twepoch = 0n;
        this.workerIdBits = 5n;
        this.dataCenterIdBits = 5n;
        this.maxWrokerId = -1n ^ (-1n << this.workerIdBits); // 值为：31
        this.maxDataCenterId = -1n ^ (-1n << this.dataCenterIdBits); // 值为：31
        this.sequenceBits = 12n;
        this.workerIdShift = this.sequenceBits; // 值为：12
        this.dataCenterIdShift = this.sequenceBits + this.workerIdBits; // 值为：17
        this.timestampLeftShift =
          this.sequenceBits + this.workerIdBits + this.dataCenterIdBits; // 值为：22
        this.sequenceMask = -1n ^ (-1n << this.sequenceBits); // 值为：4095
        this.lastTimestamp = -1n;
        //设置默认值,从环境变量取
        this.workerId = 1n;
        this.dataCenterId = 1n;
        this.sequence = 0n;
        if (this.workerId > this.maxWrokerId || this.workerId < 0) {
          throw new Error(
            "_workerId must max than 0 and small than maxWrokerId-[" +
              this.maxWrokerId +
              "]"
          );
        }
        if (this.dataCenterId > this.maxDataCenterId || this.dataCenterId < 0) {
          throw new Error(
            "_dataCenterId must max than 0 and small than maxDataCenterId-[" +
              this.maxDataCenterId +
              "]"
          );
        }

        this.workerId = BigInt(_workerId);
        this.dataCenterId = BigInt(_dataCenterId);
        this.sequence = BigInt(_sequence);
      }
      Snowflake.prototype.tilNextMillis = function (lastTimestamp) {
        var timestamp = this.timeGen();
        while (timestamp <= lastTimestamp) {
          timestamp = this.timeGen();
        }
        return BigInt(timestamp);
      };
      Snowflake.prototype.timeGen = function () {
        return BigInt(Date.now());
      };
      Snowflake.prototype.nextId = function () {
        var timestamp = this.timeGen();
        if (timestamp < this.lastTimestamp) {
          throw new Error(
            "Clock moved backwards. Refusing to generate id for " +
              (this.lastTimestamp - timestamp)
          );
        }
        if (this.lastTimestamp === timestamp) {
          this.sequence = (this.sequence + 1n) & this.sequenceMask;
          if (this.sequence === 0n) {
            timestamp = this.tilNextMillis(this.lastTimestamp);
          }
        } else {
          this.sequence = 0n;
        }
        this.lastTimestamp = timestamp;
        return (
          ((timestamp - this.twepoch) << this.timestampLeftShift) |
          (this.dataCenterId << this.dataCenterIdShift) |
          (this.workerId << this.workerIdShift) |
          this.sequence
        );
      };
      return Snowflake;
    })();

    this.tempSnowflake = new Snowflake(1n, 1n, 0n);

    // console.log(process.env, "66666666666666666666666666666666666666666666");

    // // 断开之后重新链接
    // ws.reconnect = function (ws) {
    //   console.log("999999999999999999999");
    //   if (lockReconnect) return;
    //   lockReconnect = true;
    //   setTimeout(function () {
    //     //没连接上会一直重连，设置延迟避免请求过多
    //     lockReconnect = false;
    //   }, 2000);
    // };

    // 把路由跳转事件挂载到window上
    window.routingHopLink = this.routingHopLink;
  },
  updated() {
    //每次页面渲染完之后滚动条在最底部
    // this.chatScroll();
  },

  // 销毁事件
  beforeDestroy() {
    document.removeEventListener("click", this.bodyCloseMenus);
    document.removeEventListener("scroll", this.scrollToTop);
    document.removeEventListener('paste', this.onPasteUpload)
    this.$bus.$off("Link");
    this.$bus.$off("friendArr");
    this.$bus.$off("concatList");
    this.$bus.$off("uploadMessage");
    this.$bus.$off("isNetwork");
    this.$bus.$off("groupMeberLength");
    this.$bus.$off("editRewardBus");
    this.$bus.$off("editRatioBus");
    this.$bus.$off("closeProjectBus");
    this.$bus.$off("handlerPay");
    this.$bus.$off("handlerPaySuccee");
    this.$bus.$off("messagePaySkip");
  },
  methods: {
    getMsgTime(msg){
      return msg?.createTime?.replace(/-/g, "/")
    },

    //接收消息的操作
    messageHadler(data) {
      console.log('收到消息',data);
      let that = this;
        // 如果是这个订单才接收
        if (this.currentChat.id == data.no) {
          data.data.createTime = formatDate(data.data.createTime)
          if (data.type == "1") {
            if (data.data.type == "1") {
              // 文字消息
              this.chatMessages.push({
                msgUserid: data.data.createBy,
                createTime: data.data.createTime,
                createBy: data.data.createBy,
                msg: data.data.msg,
                msgid: data.data.id,
                id: data.data.id,
              });
              // console.log(concatListItem.messages, "88888888888888");
              // that.getMemberMessage();
              // 图片和文件
            } else if (data.data.type == "2") {
              this.chatMessages.push({
                myUrl: data.data.msg,
                createTime: data.data.createTime,
                createBy: data.data.createBy,
                msg: data.data.msg,
                suffix: data.data.msg,
                orderNo: data.data.no,
              });
              console.log(data, "图片图片图片图片图片图片图片");
              // that.getMemberMessage();
              that.$bus.$emit(
                "historyImFi",
                data.data.msg,
                data.data.createBy,
                data.data.createTime
              );
              // that.uploadImgs.push(that.uploadImgs, data.data.msg);
            } else if (data.data.type == "4") {
              // console.log(data.data);
              let quoteids = data.data.quoteId;
              let msgName = data.data.msg;
              // 得到符合这个id的人（数组）
              let quoteNames = [];
              that.friendArr.forEach((item) => {
                // console.log(item.userid);
                if (quoteids.indexOf(item.userId) != -1) {
                  quoteNames.push(item.nickName);
                }
              });
              // console.log(quoteNames); //['下单专用']

              // @某人
              that.quoteName = quoteNames.join();
              this.chatMessages.push({
                msgUserid: data.data.createBy,
                createTime: data.data.createTime,
                createBy: data.data.createBy,
                msg: msgName,
                quoteName: quoteNames.join(),
                msgid: data.data.id,
                quoteId: data.data.quoteId,
              });
              // that.getMemberMessage();
            } else if (data.data.type == "5") {
              // 邀请某人
            } else if (data.data.type == "6") {
              //@全体成员
            } else if (data.data.type == "7") {
              //URL+回显文本
              console.log(data, "urlurlurlurlurlurlurl");
              // 文字消息
              this.chatMessages.push({
                msgUserid: data.data.createBy,
                createTime: data.data.createTime,
                createBy: data.data.createBy,
                msg: data.data.msg,
                msgid: data.data.id,
                id: data.data.id,
                quoteId: data.data.quoteId,
              });
              // that.getMemberMessage();
            }
            //如果在当前页面则不提示小红点，如果不在则提示
            // that.$bus.$on("sumS", (numw, orderNo) => {
            //   if (orderNo != concatListItem.id) {
            //     that.num = numw;
            //   }
            // });
            // 消息数量;如果是自己则不接受消息
            if (data.data.createBy == that.userId) {
              that.$bus.$emit(
                "message",
                data.data.msg,
                this.currentChat.id,
                0,
                data.data.createBy
              );
            } else {
              // console.log(concatListItem);
              // that.num += 1;
              that.$bus.$emit(
                "message",
                data.data.msg,
                this.currentChat.id,
                this.currentChat.unread + 1,
                data.data.createBy
              );
              // 如果两个人都在同一个订单下聊天，那么对方的状态就会一直是已读
              if (that.currentChat.id == data.no) {
                // console.log("已读已读已读已读已读已读已读已读");
                let dataRead = {
                  type: "2",
                  no: data.no,
                  msgid: data.data.id, //消息id
                  msgUserid: data.data.createBy, // 发送人的id
                };
                that.$WebSocket.onSend(JSON.stringify(dataRead));
                that.$WebSocket.reduceNum(1);
              }
            }
          } else if (data.type == "2") {
            //本人发送的消息，其他人的已读状态
            // console.log("yidudyiduyiduyiduyiduyiduyidu");
            // 通知自己有人阅读了自己发送的消息   修改页面的已读状态
            // console.log(that.chatMessages, "33333333333333333333333333333");
            this.chatMessages.forEach((item) => {
              if (item.id == data.data.id) {
                item.reads.length += 1;
                that.$bus.$emit(
                  "message",
                  data.data.msg,
                  this.currentChat.id,
                  0,
                  data.data.createBy
                );
              }
            });
          } else if (data.type == "3") {
            //消息撤回
            this.chatMessages.find(item=>{
            	if(item.id == data.data.msgid){
            		item.status = -1
            	}
            })
            // this.chatMessages.push({
            //   orderNo: data.data.no,
            //   msg: "消息已撤回",
            //   msgid: data.data.msgid,
            // });
          } else if (data.type == "0") {
            // 心跳包
          } else if (data.type == "5") {
            //来新的订单
          }
        } else {
          this.chatScroll();
          this.$bus.$emit('uploadOmListNum',data);
          return;
        }
    },
    format(date,fmt = "yyyy-MM-dd hh:mm:ss") {
      var o = {
          "M+": date.getMonth() + 1, //月份
          "d+": date.getDate(), //日
          "h+": date.getHours(), //小时
          "m+": date.getMinutes(), //分
          "s+": date.getSeconds(), //秒
          "q+": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    },
    // 图片下载按钮自定义
    clickImage() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
          "el-image-viewer__actions__inner"
        );
        let downImg = document.createElement("i");
        downImg.setAttribute("class", "el-icon-download");
        wrapper[0].appendChild(downImg);
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0];
          this.cusClickHandler();
        }
      });
    },
    cusClickHandler() {
      this.wrapperElem.addEventListener("click", this.hideCusBtn);
    },
    hideCusBtn(e) {
      let className = e.target.className;
      if (className === "el-icon-download") {
        let imgUrl = document.getElementsByClassName(
          "el-image-viewer__canvas"
        )[0].children[0].src;
        this.downloadImage(imgUrl);
      }
    },
    downloadImage(imgUrl) {
      //创建iframe下载图片
      var elemIF = document.createElement('iframe')
      elemIF.class = 'imgIframe';
      elemIF.src = imgUrl
      elemIF.style.display = 'none'
      document.body.appendChild(elemIF);
      setTimeout(()=>{
        document.body.removeChild(elemIF);
      },1000)
      return false;
      let tmpArr = imgUrl.split("/");
      let fileName = tmpArr[tmpArr.length - 1];
      window.URL = window.URL || window.webkitURL; //window.webkitURL和window.URL是一样的，window.URL标准定义，window.webkitURL是webkit内核的实现
      let xhr = new XMLHttpRequest();
      xhr.open("get", imgUrl, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response;
          let fileUrl = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          (document.body || document.documentElement).appendChild(a);
          console.log(fileUrl, "路径路径");
          a.href = fileUrl;
          window.location.href = fileUrl;
          if ("download" in a) {
            a.download = fileName;
          } else {
            a.setAttribute("download", fileName);
          }
          a.target = "_blank";
          a.click();
          a.remove();
        }
      };
      xhr.send();
    },

    // 弹窗关闭
    projectColse() {
      //显示项目
      this.projectShow = false;
      this.userProjectShow = true; //显示项目，关闭支付
    },
    // 单击项目更改记录**********
    clickRecord() {
      // 显示更改记录
      this.recordShow = true;
      // 隐藏项目
      this.projectShow = false;
    },
    // 关闭更改记录
    recordColse() {
      // 隐藏更改记录
      this.recordShow = false;
      // 显示项目
      this.projectShow = true;
    },
    //点击关闭项目改价**********
    editRewardColse() {
      // 隐藏项目改价
      this.editRewardShow = false;
      // 关闭的时候通过$bus清空上一次的改价信息
      this.$bus.$emit("clearEditInfo");
      // 显示项目
      this.projectShow = true;
    },
    //点击关闭修改收比**********
    editRatioColse() {
      // 隐藏修改收比
      this.editRatioShow = false;
      // 显示项目
      this.projectShow = true;
    },

    // 图片数组
    getuploadImgs(message) {
      return [message.msg];
    },
    // 获取图片后缀，且判断是否是图片
    getSuffix(message) {
      // console.log(message);
      //  msg刷新时渲染  suffix添加时渲染
      if (
        message?.msg?.endsWith(".jpg") ||
        message?.msg?.endsWith(".png") ||
        message?.msg?.endsWith(".gif") ||
        message?.msg?.endsWith(".jpeg") ||
        message?.msg?.endsWith(".JPG") ||
        message?.msg?.endsWith(".PNG") ||
        message?.msg?.endsWith(".GIF") ||
        message?.suffix?.endsWith(".jpg") ||
        message?.suffix?.endsWith(".png") ||
        message?.suffix?.endsWith(".gif") ||
        message?.suffix?.endsWith(".jpeg") ||
        message?.suffix?.endsWith(".PNG") ||
        message?.suffix?.endsWith(".JPG") ||
        message?.suffix?.endsWith(".GIF")
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 高亮
    highlight(message) {
      // 链接的高亮
      let temp = "";
      // console.log(message, "消息消息消息消息");
      if (message.quoteId?.startsWith("http:")) {
        // let LinkRep = new RegExp(message.msg);
        // 一级二级
        // let LinkRep =
        //   /(((https?:(?:\/\/)?)(?:[,-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/gi;
        // 三级
        // let LinkRep =
        //   /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|\&|-)+)(,?[A-Za-z0-9.-])+$/;
        let LinkRep =
          /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|\&|-|,)+[A-Za-z0-9.-])/;
        temp = message.quoteId?.replace(LinkRep, function (item) {
          return `<div style="color:#39486F!important;cursor: pointer;" onclick="routingHopLink('${item}')"> ${item} </div>
          <div style=" height: 50px; background-color: #fff;line-height:50px;border-radius: 6px;min-width: 0;" ><span style="padding:0 14px;font-size:14px;font-weight: 600;color: #333333;overflow: hidden;display: block;text-overflow: ellipsis;display: -webkit-box;display: -moz-box;height: 40rpx;-webkit-line-clamp: 1;-moz-line-clamp: 1;-webkit-box-orient: vertical;-moz-box-orient: vertical; ">${message.msg}</span></div>`;
        });
      } else {
        // 艾特人的高亮
        let currentUser = this.friendArr.filter((item) => {
          if (message.quoteId?.includes(item.userId)) {
            return item;
          }
        });
        // // console.log(currentUser, "高亮高亮高亮高亮");
        if (currentUser.length == 0) return message.msg;
        let AtMb = [];
        currentUser.forEach((item) => {
          return AtMb.push("@" + item.nickName);
        });
        let ATmbs = AtMb.join(" ");
        // // 生成正则表达式
        let Rep = new RegExp(ATmbs);
        // // 替换@的人的名字，实现高亮
        temp = message.msg.replace(Rep, (val) => {
          return '<font style="color:#f87a23!important;"> ' + val + "</font>";
        });
      }
      return temp;
    },

    // 路由跳转，生成链接的跳转
    routingHopLink(itme) {
      let link = `/${itme.split("/")[3]}/${itme.split("/")[4]}`;
      this.$router.push({ path: link });
    },

    showBigImage(imgUrl) {
      console.log(imgUrl);
      //点击图片函数，点击后，把photoVisible设置成true
      if (imgUrl != "") {
        this.photoVisible = true;
        this.bigImgUrl = e.currentTarget.src;
      }
    },
    // 滚动事件可视区
    scrollToTop(e) {
      // console.log('滚动',e);
      // 加定时器进行节流
      setTimeout(() => {
        if (e.target.scrollTop == 0 ) {
          console.log('滚动到头部');
          // 将scrollTop置为10以便下次滑到顶部
          // e.target.scrollTop = 10
          // 加载数据
          if(this.uploads == false){
            this.uploads = true;
            this.pageNum++;
            this.getMemberMessage()
          }
        }
      }, 500)

      // 获取视窗高度
      var domHight = document.body.offsetHeight;
      // dom滚动位置
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 获取监听元素
      var id;
      // 获取监听元素本身高度
      var scrollHeight;
      // 获取监听元素距离视窗顶部距离
      var offsetTop;
      // 获取监听元素距离顶部高度-窗口高度
      var top;
      // 元素距离底部的高度+元素本身高度
      var bottom;
      // console.log(this.chatMessages);
      this.chatMessages.map((item) => {
        id = document.getElementById("scrollMsg");
        scrollHeight = id.scrollHeight;
        offsetTop = id.offsetTop;
        top = offsetTop - domHight > 0 ? offsetTop - domHight : 0;
        bottom = scrollHeight + offsetTop;
        // 页面滚动位置 > 元素距离顶部高度-窗口高度 && 页面滚动位置 < 元素距离顶部高度+元素本身高度
        // console.log("元素出现在可视区: " + "1");
        // 调用webscoket接口改变状态
        // console.log(item.reads);
        if (scrollTop >= top && scrollTop <= bottom) {
          // if(){
          // this.readMessage(item.id);
          // }
        }
      });
    },
    // 已读未读
    async ReadUn(message, index, e) {
      this.left = e.clientX-280;
      this.top = e.clientY;
      this.showHaveRead = !this.showHaveRead;
      this.showHaveReadIndex = index;
      // 获取人员列表
      // await this.getMemberMessage();
      // 如果该人员的status为0则为已读，1为未读
      //  (messages:[]->reads:[]->status)
      let readStatus = [],
        unReadStatus = [],
        readPerson = [],
        unReadPerson = [],
        mySelf = this.$store.getters.userId;
      // // reads里的是已读的人
      //   // 不同的就是未读的人
      // if (message.reads.length != 0) {
      // message.reads.forEach((item) => {
      //   // 如果该人员的status为0则为已读，1为未读
      //   // 把已读的每个人的id到成员数组里去比对
      //   readStatus.push(item.userid);
      // });
      readStatus = message.reads || [];
      //   // 已读未读的人员数组
      // console.log(this.friendArr, 55555555555555555555555555555);
      this.friendArr.forEach((friendItem) => {
        if (friendItem.userId != mySelf) {
          if (readStatus.includes(friendItem.userId)) {
            readPerson.push(friendItem);
          } else if (readStatus.indexOf(friendItem.userId) == -1) {
            unReadPerson.push(friendItem);
          }
        }
      });
      // 要过滤掉status=-1的人
      this.readPerson = readPerson.filter((item) => {
        if(item.status != -1){
          return item;
        }
      });
      // 要过滤掉status=-1的人
      this.unReadPerson = unReadPerson.filter((item) => {
        if(item.status != -1){
          return item;
        }
      });
    },
    // 鼠标右击事件
    rightClickFn(e) {
      // console.log(message);
      this.left = e.clientX;
      this.top = e.clientY;
      this.showMouse = true;
      this.currentClickText = e.target.innerText;
    },
    // 全局点击事件
    bodyCloseMenus(e) {
      const self = this;
      if (self.showFileTool === true) {
        self.showFileTool = false;
      }
      if (self.showMouse === true) {
        self.showMouse = false;
      }
      if (self.showEmojiCom === true) {
        self.showEmojiCom = false;
      }
      if (self.showHaveRead === true) {
        self.showHaveRead = false;
      }
      if (self.GroupListShow == true) {
        self.GroupListShow = false;
      }
      if (self.fileImage == true) {
        this.uploadImgs = [];
        self.fileImage = false;
      }
      if (self.fileShow == true) {
        this.uploadImgs = [];
        self.fileShow = false;
      }
    },
    //查法条 显示隐藏
    queryLawClose() {
      this.queryLaw = false;
    },
    // 接收传过来的数据
    handlerLaw(newCheckLaw) {
      this.selectLawList = [...this.selectLawList, ...newCheckLaw];
      console.log(this.selectLawList);
      this.queryLaw = false;
      this.lawContent = true;
      // this.content = this.content+this.selectLawList
      //  去清空子组件的选中值
      setTimeout(() => {
        this.$refs.child.Animation([]);
      }, 100);
    },

    // 表情
    addEmoji(emoji = "") {
      this.content += emoji;
    },
    // 获取人员消息列表
    async getMemberMessage() {
      this.scrollHeight = this.$refs.myScroll ? this.$refs.myScroll.scrollHeight : 0
      const { code, data } = await getOrderMessageListApi({
        orderNo: this.currentChat.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      });
      if(data.length == 0){
        return false;
      }
      this.uploads = false;
      if (this.pageNum == 1) {
        this.chatMessages = []
      }
      this.chatMessages = [...data.reverse(), ...this.chatMessages]
      if (this.pageNum === 1) {
        // 首次渲染后获取scrollHeight并滑动到底部。
        setTimeout(() => {
          // this.chatScroll();
          let currScrollHeight = this.$refs.myScroll.scrollHeight
          this.$refs.myScroll.scrollTo(0, currScrollHeight)
        }, 20)

        //数据存入缓存
        let msgLog = JSON.parse(localStorage.getItem('chatMsgLog')) || [];
        console.log('缓存聊天记录',msgLog);
        let indexs = msgLog.findIndex(item => item.id == this.imRoomInfo.id)
        if(indexs != -1){
          //存入缓存
          msgLog[indexs].msgData = this.chatMessages;
          localStorage.setItem("chatMsgLog",JSON.stringify(msgLog))
        }else{
          msgLog.push({
            id: this.imRoomInfo.id,
            msgData: this.chatMessages
          })
          localStorage.setItem("chatMsgLog",JSON.stringify(msgLog))
        }
      } else {
        // 滚动到加载前的位置
        setTimeout(() => {
          let currScrollHeight = this.$refs.myScroll.scrollHeight
          this.$refs.myScroll.scrollTo(0, currScrollHeight - this.scrollHeight)
        }, 20)
      }
      // console.log(this.chatMessages, "消息消息消息消息消息消息消息消息");
      // this.friend = data.members;
      // // 过滤掉删除的人（status=-1）
      // this.amountNum = this.friend.filter((item) => {
      //   return item.status != -1;
      // });
      // // console.log(this.amountNum, "剩余成员剩余成员");
      // // 过滤掉status=-1的人，剩下的人的userid数组
      // this.filFriendId = this.amountNum.map((item) => {
      //   return item.userid;
      // });
    },

    // 艾特@
    showAt() {
      this.GroupListShow = true;
      // console.log(this.currentChat.id);
      this.content += "@";
      this.getMemberMessage();
    },
    keyUp(e) {
      // 监听@事件
      if (
        (e.keyCode === 229 && e.key === "@") ||
        (e.keyCode === 229 && e.code === "Digit2") ||
        (e.keyCode == 50 && e.shiftKey)
      ) {
        // console.log("@");
        this.GroupListShow = true;
        this.getMemberMessage();
      } else if (e.code === "Backspace" || e.key === "Backspace") {
        // 删除键
        // this.deleteKey();
      }
    },
    AtSomeone(userid, username) {
      // console.log(username);
      this.content += username + " ";
      // this.highlight(this.content);
      this.msgType = "4";
      this.quoteId.push(userid);
      // 输入框中文字高亮
      // if (this.content.includes(username)) {
      //   this.content = this.content.replace(
      //     username,
      //     '<span style="color:#f87a23!important;"> ' + username + "</span>"
      //   );
      //   return this.content;
      // }
    },
    // 复制
    copy() {
      navigator.clipboard.writeText(this.currentClickText);
      this.$message({
        message: "复制成功",
        type: "success",
      });
      this.showMouse = true;
    },
    // 回复
    answer() {
      alert("回复");
      this.showMouse = true;
    },
    // 下载
    download() {
      alert("下载");
      this.showMouse = true;
    },
    // 删除
    delMsg() {
      // alert("删除了");
      this.delText = false;
      this.showMouse = true;
    },
    // 转文字
    TurnText() {
      console.log("语音");
    },
    // 撤回
    chenHUI(id) {
      // console.log("撤回");
      let data = {
        type: "3",
        no: this.currentChat.id,
        msgid: id, //点击的这一条消息id
        createBy: this.userId,
        msgUserid: this.userId,
      }; //no 订单号 msg 消息本体
      // console.log(this.currentChat.id);
      this.$WebSocket.onSend(JSON.stringify(data));
    },
    // 上传图片
    uploadFile(val) {
      let formData = new FormData();
      //file是键，val.raw是要传的图片，val.name是要传的文件名
      // console.log(val);
      formData.append("file", val.raw);
      // 进一步防止文件类型错误
      if (!/(image|audio|video)\/\w+/.test(val.raw.type)) {
        this.$message({
          showClose: true,
          message: "不符合上传格式",
          type: "warning",
        });
        return false;
      }

      val.src = URL.createObjectURL(val.raw);
      // this.uploadImgs.push(val);
      this.uploadImgs.push(val);
      // console.log(val);
      // console.log(this.uploadImgs);
      this.fileImage = true;
      this.formData = formData;
      var suffer =
        "?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast";
      this.src = val.src;
      //

      this.contentSrc = val.name;
    },
    onPasteUpload(event){
      console.log('监听剪贴板',event);
      let items = event.clipboardData && event.clipboardData.items;
      let file = null
      if (items && items.length) {
          // 检索剪切板items
          for (var i = 0; i < items.length; i++) {
              if (items[i].type.indexOf('image') !== -1) {
                  file = items[i].getAsFile()
              }
          }
      }
      if (!file) {
          return;
      }
      console.log('监听剪贴板图片',file);

      let name = file.name.split('.');
      let mime = name[name.length - 1];
      file = new File([file], this.tempSnowflake.nextId() + '.' + mime,{type: file.type})


      // console.log('图片地址',fileObj);

      let formData = new FormData();
      //file是键，val.raw是要传的图片，val.name是要传的文件名
      formData.append("file", file);
      // 进一步防止文件类型错误
      if (!/(image|audio|video)\/\w+/.test(file.type)) {
        this.$message({
          showClose: true,
          message: "不符合上传格式",
          type: "warning",
        });
        return false;
      }

      // // 预览图片
      // const reader = new FileReader();
      // reader.readAsDataURL(file);
      // reader.onload = (event) => {
      //    // 图片内容
      //    const imgContent = event.target.result;
      //    // 创建img标签
      //    console.log(imgContent,'图片显示');

      // };
      let imgs = file;
      imgs.raw = file;
      imgs.src = URL.createObjectURL(file);
      // this.uploadImgs.push(val);

      this.uploadImgs.push(imgs);
      // console.log(val);
      // console.log(this.uploadImgs);
      setTimeout(()=>{

        this.fileImage = true;
      },300)
      this.formData = formData;
      var suffer =
        "?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast";
      //
      this.src = imgs.src;
      this.contentSrc = file.name;
    },
    // 上传文件
    getFile() {
      this.$refs.file.click();
    },
    // / 获取文件
    handleFileUpload(e) {
      var files = e.target.files[0]; //获取文件
      let formData = new FormData();
      formData.append("file", files); //file  接口参数名
      this.myUrl = URL.createObjectURL(files);
      this.uploadImgs.push(files);
      // // this.uploadImgs.push(URL.createObjectURL(val.raw));
      console.log(files);
      this.contentSrc = files.name;
      this.fileShow = true;
      this.src = files;
      this.formData = formData;
    },
    //获取文件名称
    getFileName(url) {
      let name = "";
      if (url !== null && url !== "") {
        name = url.substring(url.lastIndexOf("/") + 1);
      } else {
        name = "无";
      }
      return name;
    },
    // 点击发送图片文件
    async onSubmit() {
      this.formData.set("orderno", this.currentChat.id);
      // console.log(this.tempSnowflake.nextId() + "");
      // id是消息记录id
      this.formData.set("id", this.tempSnowflake.nextId() + "");
      this.formData.set("type", '2');
      const { code, msg } = await uploadEmployees(this.formData);
      if (code != 200) return;
      console.log(msg);
      this.$bus.$emit(
        "message",
        this.contentSrc,
        this.currentChat.id,
        0,
        this.userId
      );
      this.fileImage = false;
      this.fileShow = false;
    },
    // 点击取消发送文件
    handleClose() {
      this.fileImage = false;
      this.fileShow = false;
      this.uploadImgs = [];
    },
    // 点击查看订单详情
    async viewDetail(orderNo, type) {
      console.log('类型',type,orderNo);
      await this.getOrderInfo(orderNo); // 获取订单信息
      if (type == 5) {
        this.detailState = true;
      } else if (type == 6) {
        console.log(this.nowOrderInfo, "xxxxxxxxxxxxxxxxxxxxxxhhhhhhhhhhh");
        await this.getOrderGetInfo();
        this.projectShow = true; //显示详情
      } else {
        return;
      }
    },

    // 获取订单信息
    async getOrderInfo(orderNo) {
      let res = await getDetaile({ orderNo });
      this.nowOrderInfo = res.rows[0];
      // console.log(this.nowOrderInfo, "22222222222222222222222222222222222");
    },

    // 获取订单详情 项目的用户查看页要用
    async getOrderGetInfo() {
      let { code, data } = await getOrderGetInfoApi({
        id: this.nowOrderInfo.id,
      });
      if (code != 200) return;
      console.log(data,'cccccccccccccccc');
      this.nowOrderInfo = JSON.parse(JSON.stringify(data));
    },

    //获取第一二个汉字
    getHanzi(name) {
      if (name) {
        let arr = name.split("");
        let reg =
          /^(\d+$|[a-z]+$|[A-Z]+$|[` ~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$|((?=[!-~])[^\da-zA-Z])+$)/;
        let str = "";
        for (let i = 0; i < arr.length; i++) {
          if (!reg.test(arr[i])) {
            return arr[i] + arr[i + 1];
          }
        }
      }
    },
    // 判断图片文件
    matchType(fileName) {
      // 后缀获取
      var suffix = "";
      // 获取类型结果
      var result = "";
      try {
        var flieArr = fileName.split(".");
        suffix = flieArr[flieArr.length - 1];
      } catch (err) {
        suffix = "";
      }
      // fileName无后缀返回 false
      if (!suffix) {
        result = false;
        return result;
      }
      // 图片格式
      var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
      // 进行图片匹配
      result = imglist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "image";
        return result;
      }
      // 匹配txt
      var txtlist = ["txt"];
      result = txtlist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "txt";
        return result;
      }
      // 匹配 excel
      var excelist = ["xls", "xlsx", "numbers"];
      result = excelist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "excel";
        return result;
      }
      // 匹配 word
      var wordlist = ["doc", "docx"];
      result = wordlist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "word";
        return result;
      }
      // 匹配 pdf
      var pdflist = ["pdf"];
      result = pdflist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "pdf";
        return result;
      }
      // 匹配 ppt
      var pptlist = ["ppt", "pptx", "key"];
      result = pptlist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "ppt";
        return result;
      }
      // 匹配 视频
      var videolist = ["mp4", "m2v", "mkv"];
      result = videolist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "video";
        return result;
      }
      // 匹配 音频
      var radiolist = ["mp3", "wav", "wmv"];
      result = radiolist.some(function (item) {
        return item == suffix;
      });
      if (result) {
        result = "radio";
        return result;
      }
      // 其他 文件类型
      result = "other";
      return result;
    },
    // 回车发送
    keyDown(e) {
      if (e.ctrlKey && e.keyCode == 13) {
        //用户点击了ctrl+enter触发
        this.content += "\n";
      } else {
        //用户点击了enter触发
        // 执行一些逻辑方法
        if (e != undefined) {
          e.preventDefault(); // 阻止浏览器默认的敲击回车换行的方法
          this.sendMsg();
        }
      }
    },

    //关闭订单详情抽屉
    eventColse() {
      this.detailState = false; //显示详情
    },
    chatScroll() {
      //监听消息，滚动到对应位置
      this.$nextTick(() => {
        this.$refs.myScroll.scrollTop = this.$refs.myScroll.scrollHeight;
      });
    },
    // 时间格式
    getTime(time) {
      console.log(time);
      // let JqTime = time.substring(0, 10);
      // console.log(JqTime);
      // console.log(time);
      let JqTime = this.getDates(time);
      console.log(JqTime);
      let upTime = JqTime.substring(0, 10);
      console.log(upTime);
      let newDate = this.getDate(new Date());
      console.log(newDate);
      let days = this.DateMinus(upTime, newDate);
      // console.log(days);
      if (days >= 1) {
        return JqTime.substring(5, 10).replace(/\-/, "月");
      }
      return JqTime.substring(time.length - 8, time.length - 3);
    },
    // 时间天数
    DateMinus(date1, date2) {
      //date1:小日期   date2:大日期
      var sdate = new Date(date1);
      var now = new Date(date2);
      var days = now.getTime() - sdate.getTime();
      var day = parseInt(days / (1000 * 60 * 60 * 24));
      return day;
    },
    //转换时间方法
    getDates(dates) {
      //date是传过来的时间戳，注意需为13位，10位需*1000
      //也可以不传,获取的就是当前时间
      var time = new Date(dates);
      var year = time.getFullYear(); //年
      var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
      var day = ("0" + time.getDate()).slice(-2); //日
      var hours = ("0" + time.getHours()).slice(-2); //小时
      var minutes = ("0" + time.getMinutes()).slice(-2); //分钟
      var seconds = ("0" + time.getSeconds()).slice(-2); //秒
      var mydate =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      return mydate;
    },
    getDate(date) {
      //date是传过来的时间戳，注意需为13位，10位需*1000
      //也可以不传,获取的就是当前时间
      var time = new Date(date);
      var year = time.getFullYear(); //年
      var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
      var day = ("0" + time.getDate()).slice(-2); //日
      var mydate = year + "-" + month + "-" + day;

      return mydate;
    },

    // 判断有无网络
    // isLine() {
    //   let that = this;
    //   if (navigator.onLine) {
    //     //有网络
    //     let i = 0;
    //     //来网了（有网的情况下有三次重连的机会）//30秒执行一次
    //     if (typeof WebSocket != "undefined") {
    //       let timerIn = setInterval(() => {
    //         setTimeout(() => {
    //           if (isconnected) {
    //             // 连上的时候不需要再重连，否则才会去重连
    //             clearInterval(timerIn);
    //           } else {
    //             var ws = new WebSocket(
    //               `${process.env.VUE_APP_BASE_API_WS}/${that.token}?id=${that.userId}`
    //             );
    //             // console.log(this.userId, "333333333333333333333333333");
    //             that.ws = ws;
    //             console.log("webscoket连接webscoket连接webscoket连接");
    //           }
    //           i++;
    //           if (i == 3) {
    //             clearInterval(timerIn);
    //           }
    //         }, 0);
    //       }, 30000);
    //     } else {
    //       that.$message({
    //         showClose: true,
    //         message:
    //           "您的浏览器不支持Websocket通信协议，请使用Chrome或者Firefox浏览器！",
    //         type: "warning",
    //       });
    //     }
    //   } else {
    //     //无网络
    //     that.$message({
    //       showClose: true,
    //       message: "网络已断开，正在尝试重连",
    //       type: "warning",
    //     });
    //     // that.content = "";
    //   }
    // },

    // 消息已读
    readMessage(idRead, createBy, orderNo) {
      // console.log("已读已读", "999999999999999999999");
      let data = {
        type: "2",
        no: orderNo,
        msgid: idRead, //消息id
        msgUserid: createBy, // 发送人的id
      }; //no 订单号  msgid消息id msgUserid 发送该消息的用户id
      var queue = this.cirQueue(1999); //队列上限2000
      if (
        data.no != undefined &&
        data.msgid != undefined &&
        data.msgUserid != undefined
      ) {
        queue.enQueue(data); //入队
      }
      let that = this;
      // that.num = 0;
      clearInterval(timer);
      let timer = setInterval(function () {
        //每秒取10个

        for (let i = 0; i < 10; i++) {
          if (queue.isEmpty()) break;
          // if (that.ws && that.ws.readyState == 1) {
          that.$WebSocket.onSend(JSON.stringify(queue.deQueue(data)));
          // that.isLoading = false;
          //正在连接中
          // } else if (that.ws.readyState == 0) {
          //   that.isLoading = true;
          // }
        }
      }, 1000);
    },

    //截取链接id和estype
    GetParams(url, id) {
      url = url + "";
      let regstr = "/(\\?|\\&)" + id + "=([^\\&]+)/";
      let reg = eval(regstr); //eval可以将 regstr字符串转换为 正则表达式
      let result = url.match(reg); //匹配的结果是：result[0]=?sid=22 result[1]=sid result[2]=22
      if (result && result[2]) {
        return result[2];
      }
    },

    //获取分享链接的接口 1法条 2解答 3政策 4合同
    async getFxLink(Fxid, FxesType) {
      let result = {};
      if (FxesType == 1) {
        const { data } = await getLawGetInfoApi(Fxid);
        result = data.name;
      } else if (FxesType == 2) {
        const { data } = await getQaGetInfoApi(Fxid);
        result = data.name;
      } else if (FxesType == 3) {
        const { data } = await getTopGetInfoApi(Fxid);
        result = data.name;
      } else if (FxesType == 4) {
        const { data } = await getScontractGetInfoApi(Fxid);
        result = data.name;
      }
      return result;
      // console.log(
      //   result,
      //   "链接内容标题链接内容标题链接内容标题链接内容标题链接内容标题"
      // );
    },
    // 语音播放
    playVoice(item) {
      console.log('语音数据',item);
      // 判断一下当前播放的文件和之前那个文件是不是同一个,是的话暂停现在的,重新播放新的
      if(this.innerAudioMsg == item.msg){
        console.log(this.$refs.voiceAudio);

        this.audioStop();
        this.audioEnded();
        return false;
      }
      this.innerAudioIcon = item.id //切换会动的语音图标
      this.innerAudioMsg = item.msg //存一下播放的文件
      this.audioPlay()
    },
    audioPlay() {
      console.log('开始播放');
      this.$refs.voiceAudio.play();
    },
    //音频暂停
    audioStop() {
      console.log('暂停播放');
      this.$refs.voiceAudio.pause();
      // this.$refs.voiceAudio.currentTime = 0;
    },
    //播放完成
    audioEnded(){
      this.innerAudioIcon = '' //切换不会动的语音图标
      this.innerAudioMsg = '' //清除之前播放的文件
    },
    getVoiceWidth(item) {
      // console.log(item,'sssssssss')
      let pW = (60 / 60 * parseFloat(item.voiceDuration));
      return pW + 'vw';
    },
    // websocket
    // 发送消息
    async sendMsg() {
      //  做判断防止发送空格
      if (!this.content) {
        return;
      }
      var time = new Date().toLocaleString();
      //type 0 心跳（120秒没有读写操作会关闭通道，要写个定时器定时发送心跳） 1 发送消息 2 消息已读 3 消息撤回
      let data = {};
      //判断是文本还是链接
      let LinkRep =
        /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|\&|-|,)+[A-Za-z0-9.-])/;
      if (LinkRep.test(this.content)) {
        let Fxid = this.GetParams(this.content, "id");
        let FxesType = this.GetParams(this.content, "esType");
        // console.log(Fxid, FxesType);
        let Msgtitle = await this.getFxLink(Fxid, FxesType);
        // console.log(Msgtitle, "链接内容标题链接内容标题链接内容标题");
        data = {
          type: "1",
          msgType: "7",
          no: this.currentChat.id,
          msg: Msgtitle, //内容标题
          msgid: this.tempSnowflake.nextId() + "",
          createBy: this.userId,
          msgUserid: this.userId,
          createTime: time,
          quoteid: this.content, //链接
        };
      } else {
        data = {
          type: "1",
          msgType: this.msgType,
          no: this.currentChat.id,
          msg: this.content,
          msgid: this.tempSnowflake.nextId() + "",
          createBy: this.userId,
          msgUserid: this.userId,
          createTime: time,
          myUrl: this.myUrl,
          quoteid: this.quoteId.join(","),
        }; //no 订单号 msg 消息本体 msgid 生成的雪花算法id
      }
      // var data = { "type": "2", "no": "123456", "msgid": "123456789", "msgUserid": "1" }//no 订单号  消息id msgUserid 发送该消息的用户id
      // var data = { "type": "3", "no": "123456", "msgid": "123456789" }//no 订单号 msgid 消息id
      this.quoteId = [];
      // console.log(data, "-------------------------------------------发送消息");
      // console.log(this.$WebSocket, "555555555555555555");
      if (this.$WebSocket.wsss() && this.$WebSocket.wsss().readyState == 1) {
        this.isLoading = false;
        this.$WebSocket.onSend(JSON.stringify(data));
        // this.$bus.$emit("message", this.content);
        // console.log(this.content);
        this.$bus.$emit("historys", data);
        // // 发送消息，自己的数量不变
        this.$bus.$emit(
          "message",
          this.content,
          this.currentChat.id,
          0,
          this.userId
        );
        // 清空输入框
        this.content = "";
      } else {
        this.$WebSocket.initialize();
      }
    },
    concatenate(...arrays) {
      let totalLen = 0;
      for (let arr of arrays) totalLen += arr.byteLength;
      let res = new Uint8Array(totalLen);
      let offset = 0;
      for (let arr of arrays) {
        let uint8Arr = new Uint8Array(arr);
        res.set(uint8Arr, offset);
        offset += arr.byteLength;
      }
      return res.buffer;
    },
    //16进制转arraybuffer
    hex2ab(hexStr) {
      if (hexStr.length % 2 == 1) hexStr = "0" + hexStr; //补0
      var typedArray = new Uint8Array(
        hexStr.match(/[\da-f]{2}/gi).map(function (h) {
          return parseInt(h, 16);
        })
      );
      return typedArray.buffer;
    },
    writeUTF(str, isGetBytes) {
      var back = [];
      var byteSize = 0;
      for (var i = 0; i < str.length; i++) {
        var code = str.charCodeAt(i);
        if (0x00 <= code && code <= 0x7f) {
          byteSize += 1;
          back.push(code);
        } else if (0x80 <= code && code <= 0x7ff) {
          byteSize += 2;
          back.push(192 | (31 & (code >> 6)));
          back.push(128 | (63 & code));
        } else if (
          (0x800 <= code && code <= 0xd7ff) ||
          (0xe000 <= code && code <= 0xffff)
        ) {
          byteSize += 3;
          back.push(224 | (15 & (code >> 12)));
          back.push(128 | (63 & (code >> 6)));
          back.push(128 | (63 & code));
        }
      }
      for (i = 0; i < back.length; i++) {
        back[i] &= 0xff;
      }
      if (isGetBytes) {
        return back;
      }
      if (byteSize <= 0xff) {
        return [0, byteSize].concat(back);
      } else {
        return [byteSize >> 8, byteSize & 0xff].concat(back);
      }
    },
    readUTF(arr) {
      if (typeof arr === "string") {
        return arr;
      }
      var UTF = "",
        _arr = arr;
      for (var i = 0; i < _arr.length; i++) {
        var one = _arr[i].toString(2),
          v = one.match(/^1+?(?=0)/);
        if (v && one.length == 8) {
          var bytesLength = v[0].length;
          var store = _arr[i].toString(2).slice(7 - bytesLength);
          for (var st = 1; st < bytesLength; st++) {
            store += _arr[st + i].toString(2).slice(2);
          }
          UTF += String.fromCharCode(parseInt(store, 2));
          i += bytesLength - 1;
        } else {
          UTF += String.fromCharCode(_arr[i]);
        }
      }
      return UTF;
    },
    //utf-8字符转16进制
    toUTF8Hex(str) {
      var charBuf = writeUTF(str, true);
      var re = "";
      for (var i = 0; i < charBuf.length; i++) {
        var x = (charBuf[i] & 0xff).toString(16);
        if (x.length === 1) {
          x = "0" + x;
        }
        re += x;
      }
      return re;
    },
    // 循环队列
    cirQueue(n) {
      // 设置队列大小
      if (!n)
        return console.error("创建失败，请按照cirQueue(n: number)格式传入");
      // 队尾
      let tial = 0;
      // 队头
      let head = 0;
      // 队列
      let queue = [];
      // 入队
      function enQueue(data) {
        try {
          // 判断队列是否已满
          if ((tial + 1) % n === head) return console.error("队列已满");
          tial = (tial + 1) % n;
          queue.push(data);
        } catch (error) {
          console.log("error----", error);
        }
      }
      // 出队
      function deQueue() {
        try {
          // 判断空队列
          if (isEmpty()) return console.log("队列为空");
          head = (head + 1) % n;
          let item = queue.shift();
          return item;
        } catch (error) {
          console.log("error------", error);
        }
      }
      // 获取队列
      function getQueue() {
        try {
          return Array.from(queue);
        } catch (error) {
          console.log("error-----", error);
        }
      }
      // 获取队头、尾
      function getQueueHeadAndTial() {
        return {
          tial,
          head,
        };
      }

      function isEmpty() {
        //判断是否为空
        if (head === tial) return true;
      }

      return {
        enQueue,
        deQueue,
        getQueue,
        getQueueHeadAndTial,
        isEmpty,
      };
    },
  },
  filters: {
    // 超出20字显示省略号
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 20) {
        return value.slice(0, 20) + "...";
      }
      // console.log(value, "过道");
      return value;
    },
    getMemberNum(value) {
      if (!value) return "";
      let userList = value.filter(item=>item.status != -1);
      // console.log(value, "过道");
      return userList.length;
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.status {
  font-size: 12px;
  color: #90969f;
  position: absolute;
  right: 0px;
  /* top: 30px; */
  cursor: pointer;
}

.linkHref {
  cursor: text;
}
::v-deep .top .left h1 {
  flex-shrink: 0;
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 900px) {
}
/* 激活的类名 */
.isActive {
  color: #f87a23;
}
.MsgTitle {
  display: block;
  line-height: 0 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  height: 100%;
}
::v-deep .chatBan-container .el-card__body > div {
  height: calc(100% - 72px);
  position: relative;
}
::v-deep .top {
  margin: 0 16px;
  position: relative;
}
/* 当前的聊天群名称 */
.Group_title {
  display: flex;
  justify-content: space-between;
}

.Group_title .avatar {
  vertical-align: middle;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 400;
  border-radius: 8px;
}

.chatBan-container {
  height: 100%;
}

/* 聊天输入框 */
.chat-text {
  width: 100%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 999;
}
.chat-text .inputText {
  padding: 4px 10px;
  resize: none;
  font-size: 14px;
  /* min-height: 40px; */
  border-top: 1px solid #06b49c;
  border-radius: 8px;
  border-bottom: none;
  border-left: none;
  border-right: none;
}
::v-deep .chat-text .el-textarea::-webkit-scrollbar {
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
  display: none;
}
::v-deep .chat-text .el-textarea__inner {
  resize: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

.chat-text.bgc {
  background-color: #f5f7fa;
}
.chat-tool {
  /* position: absolute;
  right: 10px;
  bottom: 10px; */
  float: right;
  margin-right: 10px;
  margin-bottom: 10px;
}
.chat-tool span img {
  color: #646a73;
  margin-right: 13px;
  vertical-align: middle;
}
.chat-tool .el-button {
  text-align: center;
  font-size: 12px;
  color: #fff;
  box-sizing: border-box;
  border: none;
  background-color: #f87a23;
}
.chat-tool .FileTool li {
  padding: 13px 25px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
}
.chat-tool .FileTool li .upload-demo {
  display: flex;
  cursor: pointer;
}
.chat-tool .FileTool li:hover {
  background-color: #eff2f5;
}
.chat-tool .FileTool li img {
  vertical-align: middle;
  margin-right: 5px;
  z-index: 2;
}
.chat-text .chat-tool .FileTool {
  font-size: 14px;
  background-color: #fff;
  border-radius: 10px;
  padding: 2px;
  position: absolute;
  top: -77px;
  right: 20px;
  border: 1px solid #dededf;
}
.chat-text .chat-tool .emoji-component {
  position: absolute;
  top: -180px;
  right: 60px;
}
.chat-text #text {
  z-index: 99;
}

/* 聊天框 */
.PrDetail {
  width: 100%;
  /* background-color: pink; */
  padding: 0 16px;
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
}
.PrDetail .problemDetail {
  background: #f5f7fb;
  border-radius: 4px;
  padding: 10px 4px;
}

/* 警告框 */
.PrDetail .Group_error {
  position: absolute;
  top: 0;
  left: 0;
  height: 80%;
  width: 100%;
}
::v-deep .PrDetail .Group_error .el-alert__title {
  font-size: 16px;
  line-height: 40px;
}

.PrDetail .problemDetail p {
  font-size: 12px;
  color: #969da8;
  text-overflow: -o-ellipsis-lastline;
  /* //溢出内容隐藏 */
  overflow: hidden;
  /* //文本溢出部分用省略号表示 */
  text-overflow: ellipsis;
  /* //特别显示模式 */
  display: -webkit-box;
  /* //行数 */
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* //盒子中内容竖直排列 */
  -webkit-box-orient: vertical;
}
.chat-content {
  height: 100%;
}
.chat-container {
  height: 90%;
  width: 100%;
  position: relative;
  padding: 7px 16px 100px 16px;
}
.chat-container-scroll {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 44px;
  /* padding-bottom: 100px; */
  overflow-y: auto;
  scrollbar-width: thin;
  /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
}
::v-deep .chat-scroll__item,
.chat-scroll__item_friend {
  display: flex;
  align-items: flex-start;
  /* padding-right: 7px; */
  padding: 10px 7px 10px 0;
  position: relative;
}

::v-deep .chat-scroll__item.self {
  flex-direction: row-reverse;
  padding-right: 0;
  padding-left: 8px;
}
.chat-scroll__item i,
.chat-scroll__item_friend i {
  font-size: 14px;
  color: #06b49c;
  text-align: center;
  transform: translateY(50%);
}

.chat-scroll__item.self .sender {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  margin-right: 38px;
}
.chat-scroll__item .sender {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  margin-left: 38px;
}
.chat-scroll__item.self .sender .sender-message {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  position: relative;
}

::v-deep .el-progress__text {
  display: none;
}

.chat-scroll__item .sender .sender-message {
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
  position: relative;
}

.chat-scroll__item .timeRead {
  display: none;
  font-size: 12px;
  color: #8f959e;
  position: relative;
}
.chat-scroll__item .zjPic {
  margin-left: 2px;
  margin-top: 2px;
}
.chat-scroll__item.self .zjPic {
  margin-right: 2px;
  margin-top: 2px;
}
.chat-scroll__item:hover .timeRead {
  display: inline-block;
  margin-left: 10px;
}
.chat-scroll__item.self .timeRead {
  display: none;
  font-size: 12px;
  color: #8f959e;
  position: relative;
}
.chat-scroll__item.self:hover .timeRead {
  display: inline-block;
  margin-right: 10px;
}
/*头像*/
.chat-scroll__item .chat-scroll__item__avatar_friend {
  width: 32px;
  height: 100%;
  margin-right: 10px;
  margin-left: 1px;
  padding-top: 10px;
  position: absolute;
  left: 0;
  top: 0;
}
.chat-scroll__item.self .chat-scroll__item__avatar_friend{
  width: 32px;
  height: 100%;
  margin-right: 1px;
  margin-left: 10px;
  padding-top: 10px;
  position: absolute;
  right: 0;
  left:auto;
  top: 0px;
}

.chat-scroll__item__avatar_friend img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  /* margin-bottom: 20px; */
}
.chat-scroll__item__message {
  font-family: Source Han Sans CN;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.41px;
  color: #262628;
  background: #efefef;
  border-radius: 5px;
  padding: 10px 16px 10px 18px;
  word-break: break-all;
}

::v-deep .chat-scroll__item .chat-scroll__item_name {
  width: 100%;
  font-size: 12px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  color: #8f959e;
  text-align: right;
  position: relative;
  margin-bottom: 4px;
  vertical-align: middle;
}
::v-deep .chat-scroll__item.self .chat-scroll__item_name {
  width: 100%;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  color: #8f959e;
  text-align: right;
  position: relative;
  margin-bottom: 4px;
  vertical-align: middle;
}

.chat-scroll__item.self .chat-scroll__item__message {
  padding: 10px 16px 10px 18px;
  font-size: 14px;
  background: #ebf2fc;
  color: #000;
}
.chat-scroll__item_friend {
  margin-top: 15px;
}

/* 已读未读详情 */
.reader {
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: 280px;
  background-color: #fff;
  border-radius: 8px;
  z-index: 9999;
}
.reader div p {
  font-size: 14px;
  font-weight: 600;
}
.reader div {
  width: 140px;
  border: 1px solid #dededf;
  padding: 15px 0 0 23px;
}
.reader div:nth-child(1) {
  border-radius: 8px 0px 0px 8px;
}
.reader div:nth-child(2) {
  border-left: none;
  border-radius: 0px 8px 8px 0px;
}

.reader ul {
  padding: 10px 0;
  height: 100%;
  overflow-y: auto;
}
.reader li {
  width: 100%;
  padding: 5px 0;
  cursor: pointer;
}
::v-deep .reader li .el-avatar {
  vertical-align: middle;
  margin-right: 10px;
}
.reader li span {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
}
/* 法条 */
.drawerMain {
  height: 100%;
}
.drawerMain >>> .el-col {
  height: 100%;
}
.drawerMain >>> .dracon {
  height: 100%;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #ffffff;
  padding: 20px;
}
.drawerMain >>> .dracon .draconTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawerMain .dracon i {
  font-style: normal;
}
::v-deep .drawerMain div#card {
  /* padding: 0 10px; */
}
/* 法条框 */
.lawContent {
  background-color: #fff;
}
.lawContent li {
  background-color: #efefef;
  font-size: 14px;
  padding: 3px 5px;
  margin-bottom: 5px;
}
.lawContent li span {
  margin-top: 3px;
}
/* 鼠标点击事件 */

.mouse {
  position: fixed;
  width: 70px;
  font-size: 12px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  text-align: center;
  border-radius: 8px;
  z-index: 999;
}
.mouse ul {
  padding: 1px 1px;
}
.mouse ul li {
  padding: 10px 0;
  width: 100%;
}
.mouse ul li:hover {
  background-color: #eff2f5;
  border-radius: 4px;
}
/* 图片文件发送框 */

::v-deep .el-dialog {
  margin: 0 !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
  border-radius: 12px;
  padding: 22px 20px;
}
::v-deep .el-dialog__header {
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
}
::v-deep .el-dialog__body .upload img {
  width: 100%;
  height: 100%;
}
::v-deep .el-dialog__body .upload {
  margin: 23px 80px;
  /* 添加最大高度裁剪长图 */
  max-height: 305px;
  overflow: hidden;
}
::v-deep .el-dialog__body:nth-child(2) {
  padding: 0;
  margin-top: 33px;
}
.el-dialog__body .uploadBtn {
  display: flex;
  justify-content: flex-end;
  height: 30px;
  margin-top: 20px;
  /* margin-bottom: 20px; */
}
.el-dialog__body .uploadBtn .el-button:nth-child(2) {
  width: 60px;
  background-color: #f87a23;
  border: none;
  border-radius: 20px;
}
.el-dialog__body .uploadBtn .el-button:nth-child(1) {
  width: 60px;
  background-color: #fff;
  border: 1px solid #dadee2;
  border-radius: 20px;
  color: #000;
}
.el-dialog__body .uploadS ul {
  padding: 10px;
}
.el-dialog__body .uploadS li {
  display: flex;
  margin-bottom: 10px;
}
.el-dialog__body .uploadS li img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
}
.el-dialog__body .uploadS li span {
  font-size: 12px;
  color: #646a73;
  margin-left: 10px;
  margin-top: 13px;
}
.uploadF ul {
  padding-top: 10px;
}
.uploadF li {
  display: flex;
  margin-top: 10px;
}
.el-dialog__body .uploadF li img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle;
}
.uploadF li span {
  font-size: 12px;
  color: #646a73;
  margin-left: 10px;
  margin-top: 13px;
}
/*  */
/* @框 */
.GroupList {
  width: 100%;
  height: 20%;
  position: absolute;
  bottom: 73px;
  left: 0;
  background-color: #fff;
}
.GroupList h3 {
  font-size: 14px;
  margin-top: 18px;
  margin-left: 25px;
  color: #a5aab1;
}
.GroupList .GroupMember {
  height: calc(100% - 34px);
}
.GroupList .GroupMember ul {
  background-color: #fff;
  padding: 5px 10px;
  height: 100%;
  overflow-y: auto;
}
.GroupList li {
  padding: 4px 20px;
  display: flex;
}
.GroupList li:hover {
  background: #eceeee;
  border-radius: 4px;
}
.GroupList li img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  vertical-align: middle;
}
.GroupList li span:nth-child(2) {
  font-size: 12px;
  margin-left: 10px;
  padding-top: 3px;
  display: inline-block;
}
::v-deep .el-drawer__body {
  /* padding: 0 20px; */
}
.orderDetails >>> .el-card {
  padding: 0 20px;
}

.pie {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
  border: 1px solid #06b49c;
  border-radius: 50%;
  margin-top: 4px;
  background: #fff;
  /* background-image: linear-gradient(to right, transparent 50%, #06b49c 0); */
  color: transparent;
  text-align: center;
}

.userProject-box {
  height: 100%;
}
.userProject-box >>> .top {
  display: none;
}
.userProject-box > .el-card {
  border: 0;
}
.userProject-box >>> .project_main {
  padding: 0 30px;
}
.userProject-box >>> .el-card__body > div {
  height: calc(100% - 51px);
}
.userProject-box >>> .pay {
  height: 100%;
  padding: 0 30px;
}
.userProject-box >>> .project_main .el-drawer__header {
  margin-top: 15px;
}

@keyframes spin {
  to {
    transform: rotate(0.5turn);
  }
}
@keyframes bg {
  50% {
    background: #06b49c;
  }
}

/* 抽屉右边按钮 */
.drawerIcon{
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.drawerIcon .el-icon-close{
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
}
/* 更改记录按钮 */
.drawerIcon .recordBtn {
  cursor: pointer;
}

/* 图片下载按钮 */
::v-deep .el-image-viewer__actions__inner {
  cursor: pointer;
}

/* 滚动条 */
::-webkit-scrollbar {
  /* display: none; */
  /*滚动条整体样式*/
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  /* -webkit-box-shadow: inset 0 0 5px rgba(248, 245, 245, 0.2); */
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); */
  border-radius: 0;
  /* background: rgba(0, 0, 0, 0); */
}
</style>

<style scoped>
/* 响应式 */
@media (max-width: 972px) {
  ::v-deep .status {
    font-size: 5px;
  }
}
@media (max-width: 970px) {
  ::v-deep .top {
    width: 100%;
  }
}
@media (max-width: 896px) {
  ::v-deep .top {
    width: 100%;
    overflow: hidden;
  }
}

.item-box{
  padding: 10px 16px 10px 18px;
  background: #efefef;
  border-radius: 5px;
}

.chat-scroll__item.self .item-box {
  padding: 10px 16px 10px 18px;
  background: #ffcc72;
}


/*语音*/
.record_voice{

}
.record_voice img{
  width: 10px;
  transform: rotateY(180deg);
  margin-right:6px;
}
.record_voice{

}
.voice_file{
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.chat-scroll__item.self .voice_file{
  text-align: right;
  flex-direction: row;
  justify-content: flex-end;
}
.chat-scroll__item.self .record_voice img{
  transform: rotateY(0deg);
  margin-right:0px;
  margin-left:6px;
}

</style>
